<template>
  <a-drawer
    :width="340"
    :mask-closable="false"
    :visible="dataModel.visible"
    unmount-on-close
    :ok-loading="loading"
    @ok="handleOk"
    @cancel="handleCancel">
    <template #title>
      {{ dataModel.title }}
    </template>
    <div>
      <a-form
        ref="dictDrawerForm"
        layout="vertical"
        :model="formData"
        :disabled="dataModel.disabled"
        :style="{width:'100%'}">
        <a-form-item
          field="name"
          label="字典名"
          :rules="[{required: true, message:'请输入字典名'}]">
          <a-input v-model="formData.name" placeholder="请输入角色名..." allow-clear />
        </a-form-item>
        <a-form-item
          field="code"
          label="字典键"
          :rules="[{required: true, message:'请输入字典键'}]">
          <a-input v-model="formData.code" placeholder="请输入字典键..." allow-clear />
        </a-form-item>
      </a-form>
    </div>
  </a-drawer>
</template>

<script setup lang="ts">
import useDataModel from '@/hooks/data-model'
import useLoading from '@/hooks/loading'
import { Operation } from '@/types/global'
import { ref } from 'vue'
import { DictDto } from '@/types/modules/system'
import { create, findById, update } from '@/api/modules/system/dict'
import { ValidatedError } from '@arco-design/web-vue/es/form/interface'
import { Message } from '@arco-design/web-vue'

const defaultFormData = () => ({
  id: -1,
  name: "",
  code: "",
});

const dictDrawerForm = ref<any>(null)
const formData = ref<DictDto>(defaultFormData());
const { dataModel, openModel, closeModel } = useDataModel();
const { loading, setLoading } = useLoading();
const emit = defineEmits(["refresh"]);

const handleCancel = () => {
  closeModel();
  formData.value = defaultFormData()
  setLoading(false);
};

const createHandle = async () => {
  openModel("添加字典信息", false, true, Operation.CREATE);
}

const updateHandle = async (id: number) => {
  formData.value = {
    ...(await findById(id)).data
  }
  openModel("编辑字典信息", false, true, Operation.UPDATE);
}

const previewHandle = async (id: number) => {
  formData.value = {
    ...(await findById(id)).data
  }
  openModel("预览字典信息", true, false, Operation.PREVIEW);
}

const handleOk = async () => {
  if (dataModel.submit) {
    setLoading(true);
    if (dictDrawerForm.value) {
      dictDrawerForm.value?.validate(async (errors: undefined | Record<string, ValidatedError>) => {
        if (!errors) {
          if (dataModel.type === Operation.CREATE) {
            await create(formData.value);
            Message.success({
              content: "添加成功",
              duration: 2000
            });
          } else if (dataModel.type === Operation.UPDATE) {
            await update(formData.value);
            Message.success({
              content: "修改成功",
              duration: 2000
            });
          }

          setLoading(false);
          handleCancel();
          emit("refresh");
        } else {
          setTimeout(() => {
            setLoading(false);
          }, 1000);
        }
      });
    }
  } else {
    handleCancel();
  }
};

defineExpose({ createHandle, updateHandle, previewHandle });
</script>

<script lang="ts">
export default {
  name: 'DictDrawer'
}
</script>

<style scoped>

</style>
